<template>
  <div id="box" class="space_around">
    <div class="box_lie box_lie1">1</div>
    <div class="box_lie box_lie2">2</div>
    <div class="box_lie box_lie3">3</div>
  </div>
</template>

<script>
</script>

<style scoped="scoped">
  #box{
    width: 100%;
    height: auto;
    padding: 10px;
    box-sizing: border-box;
  }
  .box_lie{
    border:1px solid #ccc;
    height: 300px;
  }
  .space_between{
        display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      flex-direction: row;
      justify-content:space-between;
      flex-wrap:nowrap;
  }
  .space_around{
       display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      flex-direction: row;
      justify-content:space-around;
      flex-wrap:nowrap;
  }
  .box_lie1{
    width: 19%;
  }
  .box_lie2{
    width: 19%;
  }
  .box_lie3{
    width: 59%;
  }
</style>
